<template>
  <view>
    <mp-html :content="html" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" lazy-load scroll-table selectable use-anchor show-with-animation :tag-style="tagStyle" @load="load" @ready="ready" @imgtap="imgtap" @linktap="linktap" />
  </view>
</template>

<script>
// 需要测试 nvue 时，将本文件后缀改为 .nvue 即可
// 注意：此示例不包含编辑功能
const html = require("../../content")
import mpHtml from '@/components/mp-html/mp-html'
export default {
  // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
  components: {
    mpHtml
  },
  data() {
    return {
      html: "",
      tagStyle: {
        table: "box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;",
        th: "border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;",
        td: "border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;",
        li: "margin: 5px 0;",
      }
    }
  },
  onLoad() {
    this.html = html
  },
  methods: {
    load() {
      console.log('dom 树加载完毕')
    },
    ready(e) {
      console.log('ready 事件触发：', e)
    },
    imgtap(e) {
      console.log('imgtap 事件触发：', e)
    },
    linktap(e) {
      console.log('linktap 事件触发：', e)
    }
  }
}
</script>

<style>
</style>
